import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact,
    scriptBox,
    returnAttr,
    returnTagContent,
    returnVAttr,
    vfnBox,
    fnBox,
    addEvtLis,
    addVEvtLis,
    userState,
    useEffect,
    returnFn,
    formsState,
    removeEvtLis
} from "../../../static/utils/codeHTML.js"
export const data = {
    key: "user-write-selector",
    title: "User-Write-Selector 用户选择",
    titleText: ["和user-selector的区别在于，可以手输入自定义用户，回车键添加","回显的时候通过传入name用户名称属性"],
    CODEList: [
        {
            title: '基本用法',//标题
            introduction: "用于表单中点击Input框，弹出用户选择弹框。",//简介
            attention: "select 是选择用户后，点击确定按钮触发的事件，val.detail 是当前选中用户信息的数组。",//用法提示
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "选择框",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '2.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("user-selector", `
                    <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                    <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`))}
                <br />
                ${scriptBox(
                "users:[]",
                addVEvtLis('userRef', 'select', 'userSelect'),
                vfnBox('userSelect', `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnVAttr("map", `item.id`)}
                    <br />
                    <span class=code-this>this</span>.users
                    =
                    ids
                    `, 'val')
            )}
            `,
            vueCode: `
                <template>
                    <user-selector :values="users" ref="userRef" titles="用户选择" placeholder="请选择..."></user-selector>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: []
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                        }
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                `))}
                ${textIndent(
                        returnTagContent("user-selector", `
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`)
                    )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
                import { FC,useRef,useEffect,useState } from 'react';
                const App: FC = () => {
                    const userRef = useRef<any>()
                    const [ users, setUsers ] = useState<string[]>([])
                    useEffect(() => {
                        if ( userRef.current ) {
                            userRef.current?.addEventListener('select', userSelect)
                        }
                        return () => {
                            userRef.current?.removeEventListener('select', userSelect)
                        };
                    });
                    function userSelect(val:any) {
                        const ids = val.detail.map((item:any) => item.id)
                        setUsers(ids)
                    }
                    return <user-selector values={users} ref={userRef} titles="用户选择" placeholder="请选择..." ></user-selector>
                };
            `,//复制的代码
        },
        {
            title: '手动控制弹框',
            introduction: "传入 open 手动控制弹框，常用于按钮点击。",
            attention: "注意：手动控制弹框的时候，不管是关闭事件(close)还是选择事件(select)，都需要把userOpen设置为false，不然下次无法打开弹框，因为内部监听了userOpen的状态。",//用法提示
            imgs: [
                {
                    title: "按钮控制",
                    url: '3.png',
                    width: "",
                    height: "",
                    isOpen: false
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>userOpen</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "用户选择")}
                    <br />
                    ${tagContent("user-selector", `
                        <span class=code-attr-name>:open</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>userOpen</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>`)
                    }
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                "users:[],<br />userOpen:false",
                `
                            ${addVEvtLis('userRef', 'select', 'userSelect')}
                            <br />
                            ${addVEvtLis('userRef', 'close', 'userClose')}
                        `,
                `
                            ${vfnBox('userSelect', `
                            <span class=code-keyword>const</span>
                            ids
                            <span class=code-punctuation>=</span>
                            val.detail.${returnVAttr("map", `item.id`)}
                            <br />
                            <span class=code-this>this</span>.users
                            =
                            ids
                            <br />
                            <span class=code-this>this</span>.userOpen
                            =
                            false
                            `, 'val')}
                            <br />
                            ${vfnBox('userClose', `
                            <span class=code-this>this</span>.userOpen
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="userOpen=true">用户选择</button>
                        <user-selector :open="userOpen" :values="users" ref="userRef" titles="用户选择"></user-selector>
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: [],
                            userOpen: false
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                        this.$refs.userRef.addEventListener('close', this.userClose.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                            this.userOpen = false
                        },
                        userClose() {
                            this.userOpen = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(userState('userOpen', 'setUserOpen', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                            <br />
                            ${addEvtLis('userRef', 'close', 'userClose')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                        <br />
                        ${removeEvtLis('userRef', 'close', 'userClose')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(`
                    ${fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                    <br />
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)}
                <br />
                ${fnBox("userClose", "", `
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)
                        }
                `)}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "用户选择")}
                    <br />
                    ${tagContent("user-selector", `
                        <span class=code-attr-name>open</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userOpen</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>`)}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                const userRef = useRef<any>()
                const [users, setUsers] = useState<string[]>([])
                const [userOpen, setUserOpen] = useState<boolean>(false)
                useEffect(() => {
                    if (userRef.current) {
                        userRef.current?.addEventListener('select', userSelect)
                        userRef.current?.addEventListener('close', userClose)
                    }
                    return () => {
                        userRef.current?.removeEventListener('select', userSelect)
                        userRef.current?.removeEventListener('close', userClose)
                    };
                });
                function userSelect(val: any) {
                    const ids = val.detail.map((item: any) => item.id)
                    setUsers(ids)
                    setUserOpen(false)
                }
                function userClose() {
                    setUserOpen(false)
                }
                return (
                    <>
                        <button onClick={() => setUserOpen(true)}>用户选择</button>
                        <user-selector open={userOpen} values={users} ref={userRef} titles="用户选择"></user-selector>
                    </>
                )
                };
            `,
        },
        {
            title: '单选模式',
            introduction: "默认是复选，传入multiple的值false,改变为单选模式",
            attention: "注意：单选和复选模式，select事件返回的值都是数组。",//用法提示
            imgs: [
                {
                    title: "选择框",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '4.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("user-selector", `
                    <span class=code-attr-name>:multiple</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>false</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                    <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`))}
                <br />
                ${scriptBox(
                "users:[]",
                addVEvtLis('userRef', 'select', 'userSelect'),
                vfnBox('userSelect', `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnVAttr("map", `item.id`)}
                    <br />
                    <span class=code-this>this</span>.users
                    =
                    ids
                    `, 'val')
            )}
            `,
            vueCode: `
                <template>
                    <user-selector :multiple="false" :values="users" ref="userRef" titles="用户选择" placeholder="请选择..."></user-selector>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: []
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                        }
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                `))}
                ${textIndent(
                        returnTagContent("user-selector", `
                        <span class=code-attr-name>multiple</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>false</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`)
                    )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
                import { FC,useRef,useEffect,useState } from 'react';
                const App: FC = () => {
                    const userRef = useRef<any>()
                    const [ users, setUsers ] = useState<string[]>([])
                    useEffect(() => {
                        if ( userRef.current ) {
                            userRef.current?.addEventListener('select', userSelect)
                        }
                        return () => {
                            userRef.current?.removeEventListener('select', userSelect)
                        };
                    });
                    function userSelect(val:any) {
                        const ids = val.detail.map((item:any) => item.id)
                        setUsers(ids)
                    }
                    return <user-selector multiple={false} values={users} ref={userRef} titles="用户选择" placeholder="请选择..." ></user-selector>
                };
            `,//复制的代码
        },
        {
            title: 'Form中使用',//标题
            introduction: "在Ant Design的表单组件中使用，不需要传value和监听select事件，通过表单的form实例去获取选中值",//简介
            attention: "注意：Form.item的name属性和组件的field属性都是必传。",//用法提示
            hiddenCode: ["vue"],//需要隐藏的代码模块
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "选择框",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '2.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${importReact("Form", "antd")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(formsState('forms'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                        userRef.current.form = forms
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                `)))}
                
                    ${textIndent(returnCustomContent(`
                    ${tagContent("Form", `
                        <span class=code-attr-name>form</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>forms</span><span class=code-punctuation>}</span>`,
                    `<br />${textIndent(`
                            ${tagContent("Form.Item", `
                            <span class=code-attr-name>name</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userName</span><span class=code-punctuation>"</span>`, `
                            <br />${textIndent(tagContent("user-selector", `
                            <span class=code-attr-name>field</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userName</span><span class=code-punctuation>"</span>
                            <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userRef</span><span class=code-punctuation>"</span>
                            `


                    ))}`)}
                            `)}
                            `
                )}
                `))}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
            import { FC, useRef, useEffect } from 'react';
            import { Form } from 'antd';
            const App: FC = () => {
                const userRef = useRef<any>()
                const [forms] = Form.useForm()
                useEffect(() => {
                    if (userRef.current) {
                        userRef.current.form = forms
                    }
                }, []);
                return (
                    <>
                    <Form form={forms}>
                        <Form.Item name="userName">
                        <user-selector field="userName" ref="userRef" ></user-selector>
                        </Form.Item>
                    </Form>
                    </>
                )
            };
            `,//复制的代码
        },
        {
            title: '表单式封装',//标题
            introduction: "因为在web-component中接收不到Ant组件Form.item传入得onChange方法，所以可以包装一层react组件去接收，这样就可以达到一般Ant Design表单组件的自动传值和回显效果。",//简介
            attention: "注意：封装后，放入Form.item中使用，不然需要手动传入value和onChange参数。",//用法提示
            hiddenCode: ["vue"],//需要隐藏的代码模块
            btnList: [],
            reactHTML: `
            ${importReact("FC,useRef,useEffect")}
            <span class=code-tag>export </span>${appCode('UserSelect','{<span class=code-attr-name>onChange，value</span>}')}
            ${textIndent(`
            <span class=code-keyword>const</span>
            userRef
            <span class=code-punctuation>=</span>
            <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
            `)}
            ${textIndent(useEffect(textIndent(`
                <span class=code-tag>if</span>
                <span class=code-punctuation>(</span>
                userRef.<span class=code-keyword>current</span>
                <span class=code-punctuation>)</span>
                <span class=code-punctuation>{</span>
                ${textIndent(`
                    userRef.current.selectFn = <span class=code-attr-name>userSelect</span>
                    `)
            }
            <span class=code-punctuation>}</span>
            <br />
            `)))}
            ${textIndent(fnBox("userSelect", "list", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    list.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-attr-name>onChange</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                `,"any[]"))}
                ${textIndent(
                    returnTagContent("user-selector", `
                    <span class=code-attr-name>styles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span>width:100%<span class=code-punctuation>"</span>
                    <span class=code-attr-name>value</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>value</span><span class=code-punctuation>}</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                    <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`)
                )}
            <span class=code-punctuation>};</span>
            `,
            reactCode:`
            import { FC,useRef,useEffect } from 'react';
            export const UserSelector: FC<any> = ({onChange,value}) => {
                const userRef = useRef<any>()
                useEffect(() => {
                    if ( userRef.current ) {
                        userRef.current.selectFn = userSelect
                    }
                },[]);
                function userSelect(list:any[]) {
                    const ids = list.map((item:any) => item.id)
                    onChange(ids)
                }
                return <user-selector
                    styles="width:100%"
                    value={value}
                    ref={userRef}
                    titles="用户选择"
                    placeholder="请选择..." />
            };
            `
        }
    ],
    APIList: [
        {
            field: "form",
            remark: "Ant Design表单组件实例，需要通过ref元素传入，不能标签直接传。web-component不支持标签传对象格式数据",
            type: "string",
            default: ""
        },
        {
            field: "field",
            remark: "form-item的字段名,用于设置值。传入form时必填",
            type: "string",
            default: ""
        },
        {
            field: "name",
            remark: "用于回显时展示没有id的手输用户",
            type: "string | string[]",
            default: ""
        },
        {
            field: "disabled",
            remark: "是否禁止操作",
            type: "boolean",
            default: "false"
        },
        {
            field: "placeholder",
            remark: "选择框placeholder",
            type: "string",
            default: ""
        },
        {
            field: "treeshow",
            remark: "弹框右侧树节点展示控制",
            type: "boolean",
            default: "true"
        },
        {
            field: "otherParams",
            remark: "弹框搜索额外参数,需要用ref绑定传入",
            type: "object",
            default: ""
        },
        {
            field: "styles",
            remark: "选择框style,例如：color:red;font-size:16px。一定要用字符串，不要传{{color:red}}这种对象格式样式",
            type: "string",
            default: "width:183px"
        },
        {
            field: "titles",
            remark: "弹框标题",
            type: "string",
            default: "用户选择"
        },
        {
            field: "treetype",
            remark: "弹框左侧树展示类型，目前支持org-组织机构，role-角色列表",
            type: "string",
            default: "org"
        },
        {
            field: "orgid",
            remark: "弹框左侧树默认选中得组织单位id，只传入一个id时，不展示树，只查询当前单位数据。要treetype为org才生效",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "orgtype",
            remark: "弹框左侧树展示的组织单位类型，例如：业主单位，监理单位。要treetype为org才生效",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "roleid",
            remark: "弹框左侧树默认选中得角色id，只传入一个id时，不展示树，只查询当前角色数据。要treetype为role才生效",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "multiple",
            remark: "用户是否多选",
            type: "boolean",
            default: "true"
        },
        {
            field: "idkey",
            remark: "用户分页渲染和选中时的key,现在支持id，username",
            type: "string",
            default: "id"
        },
        {
            field: "values",
            remark: "选中用户key，根据idkey判断",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "selecttips",
            remark: "选择树的提示文字",
            type: "string",
            default: "选择组织机构"
        },
        {
            field: "open",
            remark: "外部控制用户弹框,不在显示选择框",
            type: "boolean",
            default: ""
        },
    ],
    otherList: [//其他
        {
            title: "事件",
            titleText: ["需要绑定元素得ref","Vue中使用注意This指向问题，建议用bind绑定","在这些事件中无法访问到React Hooks得最新值，这是因为 React 的 useState 是通过 React 的渲染机制来管理状态的，而 Web Component 是在 React 组件之外运行的，React 无法自动同步它的状态到 Web Component 的事件回调中。\n解决办法：","1、useCallback + useEffect。","2、在每次组件渲染时重新给事件赋值。","3、在react函数外部定义变量，useEffect监听hooks改变赋值给外部变量。"],
            header: ["事件名称", "类型", "说明"],
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "select",
                    type: "function（e）",
                    remark: "user-selector提交按钮点击事件,数据在e.detail,例如ref.current.addEventListener('select',(e)=>{})",
                },
                {
                    name: "close",
                    type: "function（）",
                    remark: "user-selector关闭事件,例如ref.current.addEventListener('close',()=>{})",
                },
                {
                    name: "selectFn",
                    type: "function（userList）",
                    remark: "user-selector提交按钮点击事件,参数为选择用户列表,例如ref.current.selectFn=（userList） => { }",
                },
                {
                    name: "closeFn",
                    type: "function（）",
                    remark: "user-selector关闭事件,例如ref.current.closeFn=()=>{}",
                },
            ]

        }
    ]
}